<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue -->
    <script th:src="@{js/vue2.6.14.js(t=${time})}"></script>
    <!-- jquery -->
    <script th:src="@{js/jquery3.7.1.js(t=${time})}"></script>
    <!-- element-ui -->
    <link rel="stylesheet" th:href="@{css/element-ui-2.15.4.css(t=${time})}" >
    <script th:src="@{js/element-ui-2.15.4.js(t=${time})}"></script>
    <script th:src="@{js/common.js(t=${time})}"></script>
    <title>系统首页</title>
</head>
<body>
    <div id="app">
        <div id="top-menu">
            <el-card shadow="never">
                <div class="top-menu-view">
                    <div style="font-size: 13px;">
                        <span style="line-height: 37px;">{{requestDatas.userdata.user.name}}你好，欢迎登录学生成绩管理系统</span>
                    </div>
                    <div style="margin-right: 0; margin-left: auto; display: flex">
                        <el-link @click="logout">退出登录</el-link>
                    </div>
                </div>
            </el-card>
        </div>
        <div id="app-view">
            <div id="left-menu" shadow="never">
                <el-menu
                        :collapse="false"
                        default-active="1">
                    <el-menu-item index="1" @click="targetPage('/main')">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item
                            v-show="requestDatas.userdata.role.name == '管理员'"
                            index="2" @click="targetPage('/user')">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item
                            v-show="requestDatas.userdata.role.name == '管理员' || requestDatas.userdata.role.name == '教师'"
                            index="3" @click="targetPage('/course')">
                        <i class="el-icon-notebook-1"></i>
                        <span slot="title">课程管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="targetPage('/score')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">成绩管理</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div id="content-view">
                <iframe @load="adjustIframe" :src="viewData.src" frameborder="0" scrolling="auto" id="iframe-id" ></iframe>
            </div>
        </div>
    </div>
</body>
<script>
    const vapp = new Vue({
        el: "#app",
        data: {
            // 获取的信息
            requestDatas: {
                // 用户信息
                userdata: {
                    user: {},
                    role: {}
                }
            },
            // 页面操作数据
            viewData: {
                src: "/main"
            }
        },
        created() {
            this.getUserInfo();
        },
        mounted () {
            this.getUserInfo();
            window.onresize = this.adjustIframe;
        },
        methods: {
            targetPage(page) {
                this.getUserInfo();
                this.viewData.src = page;
            },
            // iframe自适应宽高
            adjustIframe() {
                const ifm = document.getElementById("iframe-id");
                // 减去顶栏高度
                ifm.height = document.documentElement.clientHeight - 85;
                // 减去侧边栏的宽度
                ifm.width = document.documentElement.clientWidth - 201;
            },
            // 获取当前用户数据
            getUserInfo() {
                let that = this;
                postRequest("/user/getUser", that.formdata, function (result) {
                    that.requestDatas.userdata = result.data;
                });
            },
            // 退出登录
            logout() {
                let that = this;
                this.$confirm('是否退出登录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    getRequest("/logout", function (result) {
                        that.$message({
                            message: result.msg,
                            type: 'success'
                        });
                        window.location.href = "/login";
                    });
                });

            },
        }
    })

</script>

<style>
    body {
        padding: 0;
        margin: 0;
    }
    #top-menu {
        background-color: #409eff;
    }
    #app-view {
        display: flex;
    }
    #left-menu {
        width: 180px;
        position: fixed;
        left: 0;
        height: 100%;
        margin-bottom: 0;
        overflow-y: auto;
        border-right: 1px solid #EBEEF5;
    }
    .top-menu-view {
        display: flex;
    }
    .top-menu-view .el-link {
        vertical-align: top;
    }
    .el-menu {
        width: 200px;
    }
    .el-card {
        border-radius: 0;
    }
    #content-view {
        /* 设置内边距，防止被菜单挡住 */
        margin-left: 201px;
        width: calc(100% - 201px);
        max-width: calc(100% - 201px);
        min-width: calc(100% - 201px);
        height: 100%;
        min-height: 300px;
    }
    #iframe-id {
        border: none;
    }
</style>
</html>